<template>
  <div class="container">
    <div class="app-container">
      <el-tree :data="depts" :props="{label: 'name'}" default-expand-all>
        <template #default="{data}">
          <el-row style="width: 100%">
            <el-col :span="20"> {{ data.name }}</el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="12">{{ data.managerName || '未分配' }}</el-col>
                <el-col :span="12">
                  <el-dropdown @command="handleClick($event, data.id)">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 新增部门 -->
    <add-dept
      ref="deptRef"
      :show-dialog.sync="showDialog"
      :souce-depts="souceDepts"
      :pid="pid"
      @reload="getDepts"
    />
  </div>
</template>
<script>
import { translateToTreeData } from '@/utils/index'
// import {  param2Obj, formatTime, parseTime } from '@/utils/index'
// console.log(param2Obj('http://www.qq.com?name=zs&age=18'))
// console.log(formatTime(1680840886441))
// console.log(parseTime(1680800695155))
import { reqDelDept, reqGetDepts } from '@/api/department'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Department',
  components: { AddDept },
  data() {
    return {
      // 默认情况下 label 是叶子的名字  children是依赖关系的字段
      depts: [],
      souceDepts: [], // 部门原始数据
      showDialog: false, // 控制新增部门对话框的布尔值
      pid: -1
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    // 获取部门列表
    // 所有的一级部门的pid是 1, 对应一级部门的子部门的pid是一级部门的id
    async getDepts() {
      const res = await reqGetDepts()
      this.souceDepts = res.data // 存储一份原始的数据
      this.depts = translateToTreeData(res.data, 1)
    },
    // 点击下拉菜单项
    async handleClick(command, id) {
      if (command === 'add') {
        // console.log('添加')
        this.showDialog = true
        this.pid = id // 记录点击的部门的id
        this.$refs.deptRef.title = '新增部门'
      }
      if (command === 'edit') {
        // console.log('编辑')
        this.showDialog = true
        // 调用到子组件的方法
        this.pid = id // 记录点击的部门的id
        this.$refs.deptRef.title = '编辑部门'
        // 记录完毕部门的id后, 等到dom更新完毕后再调用子组件的方法
        this.$nextTick(() => {
          this.$refs.deptRef.showEditDept(id)
        })
      }
      if (command === 'del') {
        console.log('删除')
        // 1. 确认提示
        const str = await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {})
        console.log(str)
        if (str === 'confirm') {
          // 2. 发送删除请求
          await reqDelDept(id)
          // 3. 提示 略过
          // 4. 重新获取渲染
          this.getDepts()
        }
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding: 50px 100px;
}
</style>
